<template>
  <view class="pupop">
    <view class="popup-box" :animation="animationData">
      <view class="pupop-btn">
        <view @tap="cancel">取消</view>
        <view @tap="confirm" style="color: #2979ff">确定</view>
      </view>
      <picker-view
        :value="value"
        :indicator-style="indicatorStyle"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in provinceList"
            :key="index"
            :class="index == value[0] ? 'itemActive' : ''"
            >{{ item.departName }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index2) in cityList"
            :key="index2"
            :class="index2 == value[1] ? 'itemActive' : ''"
            >{{ item.departName }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index3) in areaList"
            :key="index3"
            :class="index3 == value[2] ? 'itemActive' : ''"
            >{{ item.departName }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
    <view
      @tap="close"
      @touchmove.stop.prevent
      :class="visible ? 'pupop-model' : 'pupop-models'"
    ></view>
  </view>
</template>

<script>
import { getAction } from "@/utils/request.js";
// 地址：https://ext.dcloud.net.cn/plugin?id=7065
export default {
  data() {
    return {
      value: [0, 0, 0],
      provinceList: [],
      cityList: [],
      areaList: [],
      indicatorStyle: `height: 50px;`,
      provinceIndex: 0,
      cityIndex: 0,
      areaIndex: 0,
      animationData: {},

      cityName: [],
    };
  },
  props: {
    addressList: {
      type: Array,
      default: () => [],
    },
    // 初始地区编码（例:420102）
    defaultValue: {
      type: String,
      default: () => "",
    },
    // 控制选择器显示和隐藏
    visible: {
      type: Boolean,
      default: () => false,
    },
    // 点击模态框是否关闭弹框
    maskCloseAble: {
      type: Boolean,
      default: () => true,
    },
  },
  watch: {
    visible(val) {
      this.changeActive();
    },
  },
  async created() {
    this.changeActive();
    await this.get_area_list(0, "provinceList");
    await this.get_area_list(this.provinceList[0].id, "cityList");
    await this.get_area_list(this.cityList[0].id, "areaList");
  },
  methods: {
    confirm() {
      let address = this.getAddress(...this.value);
      let code = this.areaList[this.areaIndex].nationCode;
      this.$emit("confirm", {
        code,
        address,
      });
    },
    cancel() {
      this.$emit("cancel");
    },
    getAddress(p, c, a) {
      const { provinceList = [], cityList = [], areaList = [] } = this;
      return (
        provinceList[p].departName +
        cityList[c].departName +
        areaList[a].departName
      );
    },

    async get_area_list(areaId = 0, targetList) {
      const { result } = await getAction("/app/common/area/subsetList", {
        areaId,
      });
      this[targetList] = result;
    },

    // 动画
    changeActive() {
      var active = "-315px";
      if (this.visible) {
        active = 0;
      }
      var animation = uni.createAnimation({
        duration: 400,
        timingFunction: "linear",
      });
      animation.bottom(active).step();
      this.animationData = animation.export();
    },

    bindChange(e) {
      e.detail.value[0] = e.detail.value[0] || 0;
      e.detail.value[1] = e.detail.value[1] || 0;
      e.detail.value[2] = e.detail.value[2] || 0;
      if (e.detail.value[0] != this.provinceIndex) {
        // console.log('监听第一列')
        this.provinceChange(e.detail.value[0]);
      } else if (e.detail.value[1] != this.cityIndex) {
        // console.log('监听第二列')
        this.cityChange(e.detail.value[1]);
      } else if (e.detail.value[2] != this.areaIndex) {
        // console.log('监听第三列')
        this.areaChange(e.detail.value[2]);
      }
    },
    // 监听第一列变化
    async provinceChange(e) {
      this.provinceIndex = e;
      this.cityIndex = 0;
      this.areaIndex = 0;
      this.value = [...[e, 0, 0]];
      this.cityList = [];
      this.areaList = [];
      await this.get_area_list(this.provinceList[e].id, "cityList");
      await this.get_area_list(this.cityList[0].id, "areaList");
    },

    // 监听第二列变化
    async cityChange(e) {
      this.cityIndex = e;
      this.areaIndex = 0;
      this.value = [...[this.provinceIndex, e, 0]];
      await this.get_area_list(this.cityList[e].id, "areaList");
    },

    // 监听第三列变化
    areaChange(e) {
      this.areaIndex = e;
      this.value = [...[this.provinceIndex, this.cityIndex, e]];
    },

    // 点击模态框
    close() {
      if (this.maskCloseAble) {
        this.cancel();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.pupop {
  .popup-box {
    position: fixed;
    left: 0;
    bottom: -315px;
    z-index: 99999;
    background: #fff;
    padding-bottom: 50px;
    .pupop-btn {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 30upx;
      justify-content: space-between;
      font-size: 30rpx;
    }
  }
  .pupop-model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
  }
  .pupop-models {
    display: none;
  }
  .picker-view {
    width: 750rpx;
    height: 225px;
    margin-top: 20rpx;
  }
  .item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 50px;
    font-size: 32rpx;
  }

  .itemActive {
    align-items: center;
    justify-content: center;
    text-align: center;
    display: block;
    font-weight: 700;
  }
}
</style>
